<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="jk-container flex">
			<div class="jk-left">
				<ul class="jk-photos">
					<li v-for="(item,index) in pics" :key="index">
						<div class="jk-photo">
							<img :src="item.pic">
						</div>
					</li>
				</ul>
			</div>
			<div class="flex_bd">
				<div class="bs-panel">
					<div class="bs-panel_hd flex-center justify-zBetween">
						<div class="bs-tt">全国实时疫情</div>
						<div class="bs-time">截至 2021-11-16 15:14</div>
					</div>
					<div class="ss-data">
						<ul class="ss-data-list clear">
							<li>
								<div class="data-box">
									<div class="text">境外输入</div>
									<div class="value text-red"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-red">+26</span></div>
								</div>
							</li>
							<li>
								<div class="data-box">
									<div class="text">无症状感染者</div>
									<div class="value text-blue"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-blue">+26</span></div>
								</div>
							</li>
							<li>
								<div class="data-box">
									<div class="text">现有确诊</div>
									<div class="value text-red"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-red">+26</span></div>
								</div>
							</li>
							<li>
								<div class="data-box">
									<div class="text">累计确诊</div>
									<div class="value text-poplar"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-poplar">+26</span></div>
								</div>
							</li>
							<li>
								<div class="data-box">
									<div class="text">累计死亡</div>
									<div class="value text-gray"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-gray">+26</span></div>
								</div>
							</li>
							<li>
								<div class="data-box">
									<div class="text">累计治愈</div>
									<div class="value text-green"><countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></div>
									<div class="info">较昨日<span class="text-green">+26</span></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="bs-panel">
					<div class="bs-panel_hd">
						<div class="bs-tt">疫情分布地图</div>
					</div>
					<div class="mapechart" id="map"></div>
				</div>
			</div>
			<div class="jk-right">
				<div class="bs-panel">
					<div class="bs-panel_hd">
						<div class="bs-tt">全国疫情通报</div>
					</div>
					<div class="bs-panel_bd">
						<swiper class="notice-dot" :options="noticeSwpier" ref="noticeSwpier">
							<swiper-slide v-for="(item,index) in 10" :key="index">
								<div class="notice-item">
									<div class="time">202-04-22 10:00:00</div>
									<div class="cont">湖北省卫生健康委员会发布<span class="text-blue">2020年4月22日湖北省新冠肺炎疫情情况</span></div>
								</div>
							</swiper-slide>
						</swiper>
					</div>
				</div>
				<div class="bs-panel">
					<div class="bs-panel_hd flex-center justify-zBetween">
						<div class="bs-tt">城市疫情</div>
						<div class="bs-info">累计确诊城市 <span class="text-red">338</span></div>
					</div>
					<div class="bs-panel_bd">
						<div class="cmp-cell flex-center">
							<div class="cmp-data">
								<div class="v text-blue">26</div>
								<div class="t">零病例城市</div>
							</div>
							<div class="flex_bd flex-center">
								<div class="cmp-progress flex">
									<div class="cmp-bar" style="width: 70%; background-color: #0080ff;"></div>
									<div class="cmp-bar" style="width: 30%; background-color: #d7262f;"></div>
								</div>
							</div>
							<div class="cmp-data">
								<div class="v text-red">26</div>
								<div class="t">有病例城市</div>
							</div>
						</div>
						<div class="cmp-info">全国累计确诊患者分布于338个城市全国累计确诊患者分布于338个城市</div>
					</div>
				</div>
				<div class="bs-panel">
					<div class="bs-panel_hd">
						<div class="bs-tt">全国现有确诊构成：336例</div>
					</div>
					<div class="bs-panel_bd">
						<div class="bx-tip">数据来源：各地卫健委每日公开数据</div>
						<div class="tip-echart" id="myChart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts');
	import countTo from 'vue-count-to';
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head,countTo
		},
		data() {
			return {
				// 需要滚动的时间
				duration: 5000,
				// 初始值
				startVal: 0,
				// 最终值
				endVal: 666,
				
				noticeSwpier: {
					loop: true,
					slidesPerView: '3',
					autoplay: {
						delay: 4000,
						disableOnInteraction: false,
					},
					direction: "vertical",
				},
				pics: [{
						pic: require('../../assets/images/er/pic1.png')
					},
					{
						pic: require('../../assets/images/er/pic2.png')
					},
					{
						pic: require('../../assets/images/er/pic3.png')
					},
					{
						pic: require('../../assets/images/er/pic4.png')
					}
				],
				chinaDatas: [
					[{
						name: '黑龙江',
						value: 10
					}],
					[{
						name: '内蒙古',
						value: 500
					}],
					[{
						name: '吉林',
						value: 1800
					}],
					[{
						name: '辽宁',
						value: 300
					}],
					[{
						name: '河北',
						value: 300
					}],
					[{
						name: '天津',
						value: 10
					}],
					[{
						name: '山西',
						value: 100
					}],
					[{
						name: '陕西',
						value: 1800
					}],
					[{
						name: '甘肃',
						value: 1300
					}],
					[{
						name: '宁夏',
						value: 300
					}],
					[{
						name: '青海',
						value: 3300
					}],
					[{
						name: '新疆',
						value: 100
					}],
					[{
						name: '西藏',
						value: 1200
					}],
					[{
						name: '四川',
						value: 1600
					}],
					[{
						name: '重庆',
						value: 1800
					}],
					[{
						name: '山东',
						value: 1000
					}],
					[{
						name: '河南',
						value: 1300
					}],
					[{
						name: '江苏',
						value: 2300
					}],
					[{
						name: '安徽',
						value: 1800
					}],
					[{
						name: '湖北',
						value: 2300
					}],
					[{
						name: '浙江',
						value: 5300
					}],
					[{
						name: '福建',
						value: 1800
					}],
					[{
						name: '江西',
						value: 600
					}],
					[{
						name: '湖南',
						value: 1300
					}],
					[{
						name: '贵州',
						value: 300
					}],
					[{
						name: '广西',
						value: 700
					}],
					[{
						name: '海南',
						value: 800
					}],
					[{
						name: '上海',
						value: 1300
					}],
					[{
						name: '广东',
						value: 1300
					}],
					[{
						name: '云南',
						value: 2300
					}],
					[{
						name: '北京',
						value: 1300
					}],
					[{
						name: '台湾',
						value: 1300
					}]
				],
				defaultP: [
					[{
						name: '山东',
						value: 3000,
						selected: true
					}]
				],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.map(this.defaultP);
				this.drawLine();
			})
		},
		methods: {
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			drawLine() {
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '数据统计 <br/>{b} : {c} ({d}%)',
					},
					color: ['#ff4d4d', '#ffee84', '#ff935c'],
					series: [{
						name: 'Nightingale Chart',
						type: 'pie',
						radius: ['30%', '70%'],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 0,
						},
						data: [{
								value: 30,
								name: '31省本土\n病例',
								label: {
									color: '#333',
								},
							},
							{
								value: 40,
								name: '港澳台\n病例259例',
								label: {
									color: '#333',
								},
							},
							{
								value: 48,
								name: '境外输入\n病例259例',
								label: {
									color: '#333',
								},
							},
						],
					}, ],
				});
			},
			map(str) {
				var geoCoordMap = {
					'黑龙江': [127.9688, 45.368],
					'内蒙古': [110.3467, 41.4899],
					"吉林": [125.8154, 44.2584],
					'北京': [116.4551, 40.2539],
					"辽宁": [123.1238, 42.1216],
					"河北": [114.4995, 38.1006],
					"天津": [117.4219, 39.4189],
					"山西": [112.3352, 37.9413],
					"陕西": [109.1162, 34.2004],
					"甘肃": [103.5901, 36.3043],
					"宁夏": [106.3586, 38.1775],
					"青海": [101.4038, 36.8207],
					"新疆": [87.9236, 43.5883],
					"西藏": [91.11, 29.97],
					"四川": [103.9526, 30.7617],
					"重庆": [108.384366, 30.439702],
					"山东": [117.1582, 36.8701],
					"河南": [113.4668, 34.6234],
					"江苏": [118.8062, 31.9208],
					"安徽": [117.29, 32.0581],
					"湖北": [114.3896, 30.6628],
					"浙江": [119.5313, 29.8773],
					"福建": [119.4543, 25.9222],
					"江西": [116.0046, 28.6633],
					"湖南": [113.0823, 28.2568],
					"贵州": [106.6992, 26.7682],
					"云南": [102.9199, 25.4663],
					"广东": [113.12244, 23.009505],
					"广西": [108.479, 23.1152],
					"海南": [110.3893, 19.8516],
					'上海': [119.1803, 31.2891],
					'台湾': [121.4648, 25.5630]
				};
				var chinaDatas = this.chinaDatas
				var defaultP = str
				var convertData = function(data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i][0].name];
						console.log(geoCoord, 'geoCoord')
						if (geoCoord) {
							res.push({
								name: data[i][0].name,
								value: geoCoord.concat(data[i][0].value)
							});
						}
					}
					return res;
				};
				var myChart = echarts.init(document.getElementById('map'));
				var option = {
					backgroundColor: 'transparent',
					tooltip: {
						trigger: 'item',
						triggerOn: 'click',
						backgroundColor: '#0385cd',
						borderColor: "#0385cd",
						textStyle: {
							color: "#fff"
						},
						alwaysShowContent: true,
						formatter(params) {
							return params.data.name + " " + params.data.value[2] + " 人"
						}
					},
					visualMap: {
						min: 0,
						max: 2000,
						left: -11126,
						bottom: 50,
						showLabel: !0,
						text: ["高", "低"],
						pieces: [{
							gt: 2000,
							label: "> 600Mt",
							color: "#153579"
						}, {
							gte: 1600,
							lte: 2000,
							label: "400-600 Mt",
							color: "#1a75d2"
						}, {
							gte: 1200,
							lte: 1600,
							label: "200-400 Mt",
							color: "#1d64ad"
						}, {
							gte: 800,
							lt: 1200,
							label: "45-200Mt",
							color: "#1781c0"
						}, {
							gte: 400,
							lt: 800,
							label: "无数据",
							color: "#4bc8f4"
						}, {
							gte: 0,
							lt: 400,
							label: "无数据",
							color: "#6ea9da"
						}],
						show: !0
					},
					geo: {
						map: 'china',
						label: {
							emphasis: {
								show: false,
							}
						},
						zoom: 1,
						itemStyle: {
							normal: {
								normal: {
									borderColor: '#5bdbff',
									shadowColor: '#5bdbff',
									shadowOffsetY: 20,
									shadowBlur: 30
								},
							},
							emphasis: {
								areaColor: '#081757',
								borderColor: '#5bdbff', // 区域边框颜色
							}
						},
						regions: defaultP[0],
						tooltip: {
							show: false
						}
					},
					series: [{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						z: 1,
						data: convertData(defaultP),
						symbolSize: 14,
						itemStyle: {
							color: '#5bdbff',
						},
						tooltip: {
							show: true
						}
					}, {
						type: 'map',
						mapType: 'china',
						geoIndex: 0,
						data: convertData(chinaDatas)
					}]
			
				};
				myChart.setOption(option);
				window.addEventListener("resize", () => {
					myChart.resize();
				});
				this.myChart = myChart
				this.option = option
				setTimeout(() => {
					myChart.dispatchAction({
						type: 'showTip',
						seriesIndex: 0,
						dataIndex: 0
					})
			
				}, 0)
				// var mymap = echarts.init(document.getElementById('main'));
				// mymap.setOption(options);
				myChart.on('click', params => {
					if (params.seriesType === 'map') {
						// 如果不存在，则不能选中
						const selectData = convertData([
							[{
								name: params.name,
								value: params.data.value[2]
							}]
						])
						option.geo.regions = [{
							name: params.name,
							selected: true
						}]
			
						// 显示光圈
						option.series[0].data = selectData
						myChart.setOption(option)
						setTimeout(() => {
							myChart.dispatchAction({
								type: 'showTip',
								seriesIndex: 0,
								dataIndex: 0
							})
			
						}, 0)
			
					}
				})
			},
		}
	}
</script>
